<template>
  <div class="template02-container">
    <div class="main-resume" id="resume" ref="pdfRef">
      <div class="left-box" :style="leftBoxStyle">
        <vuedraggable
          class="wrapper"
          v-model="myResumeInfo.leftModuleList"
          :group="{ name: 'people', pull: true, put: true }"
          :sort="true"
          @add="addModule('left', $event)"
          @sort="sortModule"
        >
          <transition-group>
            <div v-for="item in myResumeInfo.leftModuleList" :key="item.id">
              <DragItem
                :moduleName="item.moduleName"
                dragType="content"
                :layoutType="layoutType"
                :moduleProps="item.props"
                :id="item.id"
              ></DragItem>
            </div>
          </transition-group>
        </vuedraggable>
      </div>
      <div class="right-box">
        <vuedraggable
          class="wrapper"
          v-model="myResumeInfo.rightModuleList"
          :group="{ name: 'people', pull: true, put: true }"
          :sort="true"
          @add="addModule('right', $event)"
          @sort="sortModule"
        >
          <transition-group>
            <div v-for="item in myResumeInfo.rightModuleList" :key="item.id">
              <DragItem
                :moduleName="item.moduleName"
                dragType="content"
                :moduleProps="item.props"
                :id="item.id"
              ></DragItem>
            </div>
          </transition-group>
        </vuedraggable>
      </div>
    </div>
    <p class="tip">约一页</p>
  </div>
</template>

<script>
import vuedraggable from 'vuedraggable'
import DragItem from '@/components/Modules/DragItem.vue'
import { mapState,mapGetters } from 'vuex'
import { nanoid } from 'nanoid'
export default {
  name: 'TemplateLeftAndRight',
  data() {
    return {
      layoutType: 'left',
      myResumeInfo: {
        fontSize: '16px',
        themeColor: 'rgb(94, 142, 224)',
        resumeTitle:'应聘岗位_姓名_学历_经验',
        templateName: 'TemplateLeftAndRight',
        // 左侧模块数据
        leftModuleList: [
          {
            id: nanoid(),
            moduleName: 'Avatar',
            props: {
              name: '张三',
              job: '前端开发工程师',
              imgUrl: '/static/avatar-xx.png',
            },
          },
          {
            id: nanoid(),
            moduleName: 'BasicInfoLeft',
            props: {
              moduleTitle: '个人信息',
              infoList: [
                [
                  {
                    title: '年龄:',
                    value: '23',
                  },
                  {
                    title: '经验:',
                    value: '应届生',
                  },
                ],
                [
                  {
                    title: '手机:',
                    value: '15800000000',
                  },
                  {
                    title: '电子邮箱:',
                    value: '123456@163.com',
                  },
                ],
              ],
            },
          },
          {
            id: nanoid(),
            moduleName: 'SelfAssessment',
            props: {
              moduleTitle: '自我评价',
              contentList: [
                {
                  id: nanoid(),
                  content: '篇幅不要太长，注意结合简历整体的美观度。。。',
                },
              ],
            },
          },
        ],
        // 右侧模块数据
        rightModuleList: [
          {
            id: nanoid(),
            moduleName: 'EduExperience',
            props: {
              moduleTitle: '教育背景',
              eduList: [
                {
                  id: nanoid(),
                  time: '2016-2020',
                  schoolName: '浙江工业大学',
                  major: '软件工程',
                  degree: '本科',
                  dec: '',
                },
                {
                  id: nanoid(),
                  time: '2016-2020',
                  schoolName: '浙江工业大学',
                  major: '软件工程',
                  degree: '硕士',
                  dec: '',
                },
              ],
            },
          },
          {
            id: nanoid(),
            moduleName: 'Awards',
            props: {
              moduleTitle: '荣誉奖励',
              awardList: [
                { id: nanoid(), desc: '2020年国家奖学金' },
                { id: nanoid(), desc: '2019年优秀三好学生' },
              ],
            },
          },
          {
            id: nanoid(),
            moduleName: 'Skill',
            props: {
              moduleTitle: '专业技能',
              skillDecList: [
                { id: nanoid(), desc: '你好' },
                { id: nanoid(), desc: 'html,css,js' },
                { id: nanoid(), desc: 'es6' },
              ],
            },
          },
          {
            id: nanoid(),
            moduleName: 'ProjectExperience',
            props: {
              moduleTitle: '项目经历',
              projectList: [
                {
                  id: nanoid(),
                  // 项目时间
                  time: '2016-2020',
                  // 项目名称
                  proName: '在线可编辑简历模板系统',
                  // 工作描述
                  proDesc: [
                    '能够选择模板',
                    '自定义简历内容',
                    '在线生成pdf格式',
                  ],
                },
              ],
            },
          },
        ],
      },
    }
  },
  methods: {
    // 拖动完成：拖拽组件拖拽时使用的clone方法，导致简历中的模块与模块目录中的指向同一个对象，
    // 使用解构赋值重新赋值拖拽过来的新模块，避免相互影响
    addModule(tag, { newIndex }) {
      if (tag === 'left') {
        const newModule = { ...this.myResumeInfo.leftModuleList[newIndex] }
        this.myResumeInfo.leftModuleList[newIndex] = newModule
        console.log(this.myResumeInfo.leftModuleList)
      } else {
        const newModule = { ...this.myResumeInfo.rightModuleList[newIndex] }
        this.myResumeInfo.rightModuleList[newIndex] = newModule
        console.log(this.myResumeInfo.rightModuleList)
      }
      // 通知仓库更新数据
      this.$store.commit('setResumeInfo', {
        templateName: 'TemplateLeftAndRight',
        resumeInfo: this.myResumeInfo,
      })
    },
    // 排序发生变化时的事件
    sortModule() {
      // 通知仓库更新数据
      this.$store.commit('setResumeInfo', {
        templateName: 'TemplateLeftAndRight',
        resumeInfo: this.myResumeInfo,
      })
    },
  },
  computed: {
    ...mapState(['myResume']),
    ...mapGetters(['myThemeColor']),
    leftBoxStyle(){
      return {
        backgroundColor:this.myThemeColor
      }
    }
  },
  components: {
    vuedraggable,
    DragItem,
  },
  created() {
    // 先根据模板名称从本地存储读取对应的简历信息
    let data = JSON.parse(localStorage.getItem(this.myResumeInfo.templateName))
    // 如果本地存储已经存在简历信息，就使用本地的数据渲染简历模板
    // 否则使用模板默认数据
    if (data && data.templateName) {
      this.myResumeInfo = data
    }
    this.$store.commit('setResumeInfo', {
      templateName: 'TemplateLeftAndRight',
      resumeInfo: this.myResumeInfo,
    })
    this.$store.commit('setCurrentTemplateName', this.myResumeInfo.templateName)
  },
}
</script>

<style scoped lang="less">
.template02-container {
  position: relative;
  display: flex;
  width: 21cm;
  height: 100%;
  min-height: 297mm;
  background-color: #fff;
  margin: 0 auto;
  padding: 20px 0 20px 5px;
  box-sizing: border-box;

  .main-resume {
    width: 100%;
    display: flex;
  }

  .left-box {
    width: 30%;
    height: 100%;
    background-color: #062743;
  }

  .right-box {
    width: 70%;
    height: 100%;
    background-color: white;
  }
  .tip {
    position: absolute;
    top: 29.7cm;
    left: -60px;
    z-index: 99;
    width: 110%;
    border-top: solid 1px red;
    color: red;
    margin-top: 0;
  }
}
</style>
